<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  <meta charset="utf-8" /> 
  <title>Timeline - Ace Admin</title> 
  <meta name="description" content="based on widget boxes with 2 different styles" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
  <!-- bootstrap & fontawesome --> 
  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/bootstrap.min.css" /> 
  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/font-awesome/4.5.0/css/font-awesome.min.css" /> 
  <!-- page specific plugin styles --> 
  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/jquery-ui.min.css" /> 
  <!-- text fonts --> 
  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/fonts.googleapis.com.css" /> 
  <!-- ace styles --> 
  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /> 
  <!--[if lte IE 9]>
			<link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]--> 
  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace-skins.min.css" /> 
  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace-rtl.min.css" /> 
  <!--[if lte IE 9]>
		  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace-ie.min.css" />
		<![endif]--> 
  <!-- inline styles related to this page --> 
  <!-- ace settings handler --> 
  <script src="__PUBLIC__/Admin/assets/js/ace-extra.min.js"></script> 
  <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --> 
  <!--[if lte IE 8]>
		<script src="__PUBLIC__/Admin/assets/js/html5shiv.min.js"></script>
		<script src="__PUBLIC__/Admin/assets/js/respond.min.js"></script>
		<![endif]--> 
 </head> 
 <body class="no-skin"> 
  <include file="Public/header" /> 
  <!-- /.header --> 
  <div class="main-container ace-save-state" id="main-container"> 
   <script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script> 
   <div id="sidebar" class="sidebar                  responsive                    ace-save-state"> 
    <script type="text/javascript">
					try{ace.settings.loadState('sidebar')}catch(e){}
				</script> 
    <div class="sidebar-shortcuts" id="sidebar-shortcuts"> 
     <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"> 
      <button class="btn btn-success"> <i class="ace-icon fa fa-signal"></i> </button> 
      <button class="btn btn-info"> <i class="ace-icon fa fa-pencil"></i> </button> 
      <button class="btn btn-warning"> <i class="ace-icon fa fa-users"></i> </button> 
      <button class="btn btn-danger"> <i class="ace-icon fa fa-cogs"></i> </button> 
     </div> 
     <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini"> 
      <span class="btn btn-success"></span> 
      <span class="btn btn-info"></span> 
      <span class="btn btn-warning"></span> 
      <span class="btn btn-danger"></span> 
     </div> 
    </div>
    <!-- /.sidebar-shortcuts --> 
    <include file="Public/navlist" />
    <!-- /.nva-list --> 
    <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> 
     <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> 
    </div> 
   </div> 
   <div class="main-content"> 
    <div class="main-content-inner"> 
     <div class="breadcrumbs ace-save-state" id="breadcrumbs"> 
      <ul class="breadcrumb"> 
       <li> <i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a> </li> 
       <li> <a href="#">More Pages</a> </li> 
       <li class="active">Timeline</li> 
      </ul>
      <!-- /.breadcrumb --> 
      <div class="nav-search" id="nav-search"> 
       <form class="form-search"> 
        <span class="input-icon"> <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" /> <i class="ace-icon fa fa-search nav-search-icon"></i> </span> 
       </form> 
      </div>
      <!-- /.nav-search --> 
     </div> 
     <div class="page-content"> 
      <div class="ace-settings-container" id="ace-settings-container"> 
       <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn"> 
        <i class="ace-icon fa fa-cog bigger-130"></i> 
       </div> 
       <div class="ace-settings-box clearfix" id="ace-settings-box"> 
        <div class="pull-left width-50"> 
         <div class="ace-settings-item"> 
          <div class="pull-left"> 
           <select id="skin-colorpicker" class="hide"> <option data-skin="no-skin" value="#438EB9">#438EB9</option> <option data-skin="skin-1" value="#222A2D">#222A2D</option> <option data-skin="skin-2" value="#C6487E">#C6487E</option> <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option> </select> 
          </div> 
          <span>&nbsp; Choose Skin</span> 
         </div> 
         <div class="ace-settings-item"> 
          <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" /> 
          <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label> 
         </div> 
         <div class="ace-settings-item"> 
          <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" /> 
          <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label> 
         </div> 
         <div class="ace-settings-item"> 
          <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off" /> 
          <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label> 
         </div> 
         <div class="ace-settings-item"> 
          <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" /> 
          <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label> 
         </div> 
         <div class="ace-settings-item"> 
          <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" /> 
          <label class="lbl" for="ace-settings-add-container"> Inside <b>.container</b> </label> 
         </div> 
        </div>
        <!-- /.pull-left --> 
        <div class="pull-left width-50"> 
         <div class="ace-settings-item"> 
          <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" /> 
          <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label> 
         </div> 
         <div class="ace-settings-item"> 
          <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" /> 
          <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label> 
         </div> 
         <div class="ace-settings-item"> 
          <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" /> 
          <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label> 
         </div> 
        </div>
        <!-- /.pull-left --> 
       </div>
       <!-- /.ace-settings-box --> 
      </div>
      <!-- /.ace-settings-container --> 
      <div class="hr hr-18 dotted hr-double"></div> 
      <h4 class="pink"> <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i> <a href="#my-modal" role="button" class="blue mood-add" data-toggle="modal">添加一条新的心情</a> </h4> 
      <div class="hr hr-18 dotted hr-double"></div>
      <!-- /.page-header --> 
      <div id="my-modal" class="modal fade" tabindex="-1"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
          <h3 class="smaller lighter blue no-margin">握不住的沙,挽不住的时光</h3> 
         </div> 
         <div class="page-content"> 
          <div class="page-content-area"> 
           <div class="row"> 
            <div class="col-xs-12"> 
             <!-- PAGE CONTENT BEGINS --> 
             <form class="form-horizontal" role="form" method="post" action="{:U('Mood/moodAdd')}"> 
              <!-- #section:elements.form --> 
              <div class="form-group"> 
               <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 心情标题：</label> 
               <div class="col-sm-9"> 
                <input type="text" id="form-field-1" placeholder="输入心情标题" class="col-xs-10 col-sm-5" name="chat_title" /> 
               </div> 
              </div> 
              <div class="form-group"> 
               <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 前台是否隐藏：</label> 
               <div class="col-sm-9"> 
                <div class="col-xs-3"> 
                 <label> <input name="is_display" class="ace ace-switch ace-switch-6" type="checkbox" value="0" /> <span class="lbl"></span> </label> 
                </div> 
               </div> 
              </div> 
              <div class="form-group"> 
               <label class="col-sm-3 control-label no-padding-right" for="limited">心情内容：</label> 
               <div class="col-sm-9"> 
                <div class="pos-rel"> 
                 <textarea class="form-control limited autosize-transition" id="limited" maxlength="50" name="chat_content"></textarea> 
                </div> 
               </div> 
              </div> 
              <div class="clearfix form-actions"> 
               <div class="col-md-offset-3 col-md-9"> 
                <button class="btn btn-info"> <i class="ace-icon fa fa-check bigger-110"></i> 立即提交 </button> &nbsp; &nbsp; &nbsp; 
                <button class="btn" type="reset"> <i class="ace-icon fa fa-undo bigger-110"></i> 重置 </button> 
               </div> 
              </div> 
              <div class="hr hr-24"></div> 
             </form> 
            </div>
            <!-- /.col --> 
           </div>
           <!-- /.row --> 
          </div>
          <!-- /.page-content-area --> 
         </div>
         <!-- /.page-content --> 
         <div class="modal-footer no-margin-top"> 
          <button class="btn btn-sm btn-danger pull-left" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 关闭 </button> 
         </div> 
        </div>
        <!-- /.modal-content --> 
       </div>
       <!-- /.modal-dialog --> 
      </div>



      <div id="my-modal-2" class="modal fade" tabindex="-1"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
          <h3 class="smaller lighter blue no-margin">编辑心情</h3> 
         </div> 
         <div class="page-content"> 
          <div class="page-content-area"> 
           <div class="row"> 
            <div class="col-xs-12"> 
             <!-- PAGE CONTENT BEGINS --> 
             <form class="form-horizontal" role="form" method="post" action="{:U('Mood/moodEditor')}"> 
              <!-- #section:elements.form --> 
              <div class="form-group">
              	<input type="hidden" name="mood_id">
               <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 心情标题：</label> 
               <div class="col-sm-9"> 
                <input type="text" id="form-field-1" placeholder="输入心情标题" class="col-xs-10 col-sm-5" name="chat_title" /> 
               </div> 
              </div> 
              <div class="form-group"> 
               <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 前台是否隐藏：</label> 
               <div class="col-sm-9"> 
                <div class="col-xs-3"> 
                 <label> <input name="is_display" class="ace ace-switch ace-switch-6" type="checkbox" value="0" /> <span class="lbl"></span> </label> 
                </div> 
               </div> 
              </div> 
              <div class="form-group"> 
               <label class="col-sm-3 control-label no-padding-right" for="limited">心情内容：</label> 
               <div class="col-sm-9"> 
                <div class="pos-rel"> 
                 <textarea class="form-control limited autosize-transition" id="limited" maxlength="50" name="chat_content"></textarea> 
                </div> 
               </div> 
              </div> 
              <div class="clearfix form-actions"> 
               <div class="col-md-offset-3 col-md-9"> 
                <button class="btn btn-info"> <i class="ace-icon fa fa-check bigger-110"></i> 立即提交 </button> &nbsp; &nbsp; &nbsp; 
                <button class="btn" type="reset"> <i class="ace-icon fa fa-undo bigger-110"></i> 重置 </button> 
               </div> 
              </div> 
              <div class="hr hr-24"></div> 
             </form> 
            </div>
            <!-- /.col --> 
           </div>
           <!-- /.row --> 
          </div>
          <!-- /.page-content-area --> 
         </div>
         <!-- /.page-content --> 
         <div class="modal-footer no-margin-top"> 
          <button class="btn btn-sm btn-danger pull-left" data-dismiss="modal"> <i class="ace-icon fa fa-times"></i> 关闭 </button> 
         </div> 
        </div>
        <!-- /.modal-content --> 
       </div>
       <!-- /.modal-dialog --> 
      </div> 

      <div class="row"> 
       <div class="col-xs-12"> 
        <!-- PAGE CONTENT BEGINS --> 
        <div id="timeline-2"> 
         <div class="row"> 
          <div class="col-xs-12 col-sm-10 col-sm-offset-1"> 
           <foreach name="moodList" item="v" key="k"> 
            <div class="timeline-container timeline-style2"> 
             <span class="timeline-label"> <b>{$k}</b> </span> 
             <div class="timeline-items"> 
              <foreach name="v" item="nv" key="nk"> 
               <if condition="$nv['chat_title'] neq 'Empty String'"> 
                <div class="timeline-item clearfix"> 
                 <div class="timeline-info"> 
                  <span class="timeline-date"> {:date('m月d日',$nv['chat_time'])} {:date('H:i',$nv['chat_time'])} <span> <i class="timeline-indicator btn btn-info no-hover"></i> </span></span>
                 </div> 
                 <div class="widget-box transparent"> 
                  <div class="widget-body"> 
                   <div class="widget-main no-padding"> 
                    <span class="bigger-110"> <a href="#" class="purple bolder">{$nv.chat_title}</a></span> 
                    <a href="#my-modal-2" data-toggle="modal"> <i class="ace-icon fa fa-pencil blue bigger-125 mood-editor"></i> 
                    <input type="hidden" name="mid" value="{$nv.chat_id}">
                    </a> 
                    <a href="{:U('Mood/moodDel',array('mid'=>$nv['chat_id']))}" class="id-btn-dialog2"> <i class="ace-icon fa fa-times red bigger-125"></i> </a> 
                    <br /> {$nv.chat_content} 
                   </div> 
                  </div> 
                 </div> 
                </div> 
                <else /> 
                <div class="timeline-item clearfix"> 
                 <div class="timeline-info"> 
                  <span class="timeline-date"> {:date('m月d日',$nv['chat_time'])} {:date('H:i',$nv['chat_time'])} <span> <i class="timeline-indicator btn btn-info no-hover"></i> </span></span>
                 </div> 
                 <div class="widget-box transparent"> 
                  <div class="widget-body"> 
                   <div class="widget-main no-padding"> 
                    <br /> 
                    <span class="bigger-110"> {$nv.chat_content} </span> 
                    <a href="#my-modal-2" data-toggle="modal"> <i class="ace-icon fa fa-pencil blue bigger-125 mood-editor"></i> 
                    <input type="hidden" name="mid" value="{$nv.chat_id}">
                    </a>
                    <a href="{:U('Mood/moodDel',array('mid'=>$nv['chat_id']))}" class="id-btn-dialog2" "=""> <i class="ace-icon fa fa-times red bigger-125"></i> </a> 
                   </div> 
                  </div> 
                 </div> 
                </div> 
               </if> 
              </foreach> 
             </div>
             <!-- /.timeline-items --> 
            </div>
            <!-- /.timeline-container --> 
           </foreach> 
          </div> 
         </div> 
        </div> 
        <div id="dialog-confirm" class="hide"> 
         <div class="alert alert-info bigger-110">
          该心情被永久删除，无法恢复。
         </div> 
         <div class="space-6"></div> 
         <p class="bigger-110 bolder center grey"> <i class="ace-icon fa fa-hand-o-right blue bigger-120"></i>你确定？</p> 
        </div> 
        <!-- PAGE CONTENT ENDS --> 
       </div>
       <!-- /.col --> 
      </div>
      <!-- /.row --> 
     </div>
     <!-- /.page-content --> 
    </div> 
   </div>
   <!-- /.main-content --> 
   <include file="Public/footer" />
   <!-- ./footer --> 
   <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i> </a> 
  </div>
  <!-- /.main-container --> 
  <!-- basic scripts --> 
  <!--[if !IE]> --> 
  <script src="__PUBLIC__/Admin/assets/js/jquery-2.1.4.min.js"></script> 
  <!-- <![endif]--> 
  <!--[if IE]>
<script src="__PUBLIC__/Admin/assets/js/jquery-1.11.3.min.js"></script>
<![endif]--> 
  <script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='__PUBLIC__/Admin/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script> 
  <script src="__PUBLIC__/Admin/assets/js/bootstrap.min.js"></script> 
  <!-- page specific plugin scripts --> 
  <script src="__PUBLIC__/Admin/assets/js/jquery-ui.min.js"></script> 
  <script src="__PUBLIC__/Admin/assets/js/jquery.ui.touch-punch.min.js"></script> 
  <!-- ace scripts --> 
  <script src="__PUBLIC__/Admin/assets/js/ace-elements.min.js"></script> 
  <script src="__PUBLIC__/Admin/assets/js/ace.min.js"></script> 
  <!-- inline scripts related to this page --> 
  <script type="text/javascript">
			jQuery(function($) {
				$('[data-toggle="buttons"] .btn').on('click', function(e){
					var target = $(this).find('input[type=radio]');
					var which = parseInt(target.val());
					$('[id*="timeline-"]').addClass('hide');
					$('#timeline-'+which).removeClass('hide');
				});
			});
		</script> 
  <!-- inline scripts related to this page --> 
  <script type="text/javascript">
			jQuery(function($) {
				$('.modal.aside').ace_aside();
				
				$('#aside-inside-modal').addClass('aside').ace_aside({container: '#my-modal > .modal-dialog'});
				
				//$('#top-menu').modal('show')
				
				$(document).one('ajaxloadstart.page', function(e) {
					//in ajax mode, remove before leaving page
					$('.modal.aside').remove();
					$(window).off('.aside')
				});
				
				
				//make content sliders resizable using jQuery UI (you should include jquery ui files)
				//$('#right-menu > .modal-dialog').resizable({handles: "w", grid: [ 20, 0 ], minWidth: 200, maxWidth: 600});
			})
		</script> 
  <!-- inline scripts related to this page --> 
  <script type="text/javascript">
			jQuery(function($) {
			
				$( "#datepicker" ).datepicker({
					showOtherMonths: true,
					selectOtherMonths: false,
					//isRTL:true,
			
					
					/*
					changeMonth: true,
					changeYear: true,
					
					showButtonPanel: true,
					beforeShow: function() {
						//change button colors
						var datepicker = $(this).datepicker( "widget" );
						setTimeout(function(){
							var buttons = datepicker.find('.ui-datepicker-buttonpane')
							.find('button');
							buttons.eq(0).addClass('btn btn-xs');
							buttons.eq(1).addClass('btn btn-xs btn-success');
							buttons.wrapInner('<span class="bigger-110" />');
						}, 0);
					}
			*/
				});
			
			
				//override dialog's title function to allow for HTML titles
				$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
					_title: function(title) {
						var $title = this.options.title || '&nbsp;'
						if( ("title_html" in this.options) && this.options.title_html == true )
							title.html($title);
						else title.text($title);
					}
				}));
			
				$( "#id-btn-dialog1" ).on('click', function(e) {
					e.preventDefault();
			
					var dialog = $( "#dialog-message" ).removeClass('hide').dialog({
						modal: true,
						title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> jQuery UI Dialog</h4></div>",
						title_html: true,
						buttons: [ 
							{
								text: "Cancel",
								"class" : "btn btn-minier",
								click: function() {
									$( this ).dialog( "close" ); 
								} 
							},
							{
								text: "OK",
								"class" : "btn btn-primary btn-minier",
								click: function() {
									$( this ).dialog( "close" ); 
								} 
							}
						]
					});
			
					/**
					dialog.data( "uiDialog" )._title = function(title) {
						title.html( this.options.title );
					};
					**/
				});
			
			
				$( ".id-btn-dialog2" ).on('click', function(e) {
          var del_path = $(this).attr('href');
					e.preventDefault();
				   var del_path = $(this).attr('href');
					$( "#dialog-confirm" ).removeClass('hide').dialog({
						resizable: false,
						width: '320',
						modal: true,
						title: "<div class='widget-header'><h4 class='smaller'><i class='ace-icon fa fa-exclamation-triangle red'></i>  清空回收站？</h4></div>",
						title_html: true,
						buttons: [
							{
								html: "<i class='ace-icon fa fa-trash-o bigger-110'></i>&nbsp;删除",
								"class" : "btn btn-danger btn-minier",
								click: function() {
                  $(location).attr('href',del_path);
									$( this ).dialog( "close" );
								}
							}
							,
							{
								html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 取消",
								"class" : "btn btn-minier",
								click: function() {
									$( this ).dialog( "close" );
								}
							}
						]
					});
				});
			
			
				
				//autocomplete
				 var availableTags = [
					"ActionScript",
					"AppleScript",
					"Asp",
					"BASIC",
					"C",
					"C++",
					"Clojure",
					"COBOL",
					"ColdFusion",
					"Erlang",
					"Fortran",
					"Groovy",
					"Haskell",
					"Java",
					"JavaScript",
					"Lisp",
					"Perl",
					"PHP",
					"Python",
					"Ruby",
					"Scala",
					"Scheme"
				];
				$( "#tags" ).autocomplete({
					source: availableTags
				});
			
				//custom autocomplete (category selection)
				$.widget( "custom.catcomplete", $.ui.autocomplete, {
					_create: function() {
						this._super();
						this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
					},
					_renderMenu: function( ul, items ) {
						var that = this,
						currentCategory = "";
						$.each( items, function( index, item ) {
							var li;
							if ( item.category != currentCategory ) {
								ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
								currentCategory = item.category;
							}
							li = that._renderItemData( ul, item );
								if ( item.category ) {
								li.attr( "aria-label", item.category + " : " + item.label );
							}
						});
					}
				});
				
				 var data = [
					{ label: "anders", category: "" },
					{ label: "andreas", category: "" },
					{ label: "antal", category: "" },
					{ label: "annhhx10", category: "Products" },
					{ label: "annk K12", category: "Products" },
					{ label: "annttop C13", category: "Products" },
					{ label: "anders andersson", category: "People" },
					{ label: "andreas andersson", category: "People" },
					{ label: "andreas johnson", category: "People" }
				];
				$( "#search" ).catcomplete({
					delay: 0,
					source: data
				});
				
				
				//tooltips
				$( "#show-option" ).tooltip({
					show: {
						effect: "slideDown",
						delay: 250
					}
				});
			
				$( "#hide-option" ).tooltip({
					hide: {
						effect: "explode",
						delay: 250
					}
				});
			
				$( "#open-event" ).tooltip({
					show: null,
					position: {
						my: "left top",
						at: "left bottom"
					},
					open: function( event, ui ) {
						ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
					}
				});
			
			
				//Menu
				$( "#menu" ).menu();
			
			
				//spinner
				var spinner = $( "#spinner" ).spinner({
					create: function( event, ui ) {
						//add custom classes and icons
						$(this)
						.next().addClass('btn btn-success').html('<i class="ace-icon fa fa-plus"></i>')
						.next().addClass('btn btn-danger').html('<i class="ace-icon fa fa-minus"></i>')
						
						//larger buttons on touch devices
						if('touchstart' in document.documentElement) 
							$(this).closest('.ui-spinner').addClass('ui-spinner-touch');
					}
				});
			
				//slider example
				$( "#slider" ).slider({
					range: true,
					min: 0,
					max: 500,
					values: [ 75, 300 ]
				});
			
			
			
				//jquery accordion
				$( "#accordion" ).accordion({
					collapsible: true ,
					heightStyle: "content",
					animate: 250,
					header: ".accordion-header"
				}).sortable({
					axis: "y",
					handle: ".accordion-header",
					stop: function( event, ui ) {
						// IE doesn't register the blur when sorting
						// so trigger focusout handlers to remove .ui-state-focus
						ui.item.children( ".accordion-header" ).triggerHandler( "focusout" );
					}
				});
				//jquery tabs
				$( "#tabs" ).tabs();
				
				
				//progressbar
				$( "#progressbar" ).progressbar({
					value: 37,
					create: function( event, ui ) {
						$(this).addClass('progress progress-striped active')
							   .children(0).addClass('progress-bar progress-bar-success');
					}
				});
			
				
				//selectmenu
				 $( "#number" ).css('width', '200px')
				.selectmenu({ position: { my : "left bottom", at: "left top" } })
					
			});
		</script>

		<script type="text/javascript">
			$(function(){
					$(".mood-editor").click(function(){
					var id = $(this).next().val();
					$.get("{:U('Mood/moodEditor')}",{mid:id},function(data){
						$("input[name='mood_id']").val(id);
						$("input[name='chat_title']").val(data.chat_title);
						if (data.is_display == 0) {
							$("input[name='is_display']").prop('checked',true); 
						} else {
							$("input[name='is_display']").removeAttr('checked');
						}
						$("textarea[name='chat_content']").val(data.chat_content);
					},'json');
				});

				$('.mood-add').click(function(){
					$('.form-horizontal')[0].reset();
				});
			})
		</script>   
 </body>
</html>